<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<!DOCTYPE html>
<html lang="en">
<head>
<title>菜谱详情</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Staple Food Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
	SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, Sony Ericsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Custom Theme files -->
<link href="css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<link href="css/style.css" type="text/css" rel="stylesheet" media="all">  
<link href="css/font-awesome.css" rel="stylesheet"> <!-- font-awesome icons --> 
<!-- //Custom Theme files --> 
<!-- js -->
<script src="js/jquery-2.2.3.min.js"></script>  
<!-- //js -->
<!-- web-fonts -->   
<link href="http://fonts.googleapis.com/css?family=Berkshire+Swash" rel="stylesheet"> 
<link href="http://fonts.googleapis.com/css?family=Yantramanav:100,300,400,500,700,900" rel="stylesheet">
<!-- //web-fonts -->
</head>
<body> 
	<!-- banner -->
	<div class="banner about-w3bnr">
		<!-- header -->
		<%@ include file="../jsp/userHeader2.jsp" %>
		<!-- //header-end --> 
		<!-- banner-text -->
		<div class="banner-text">	
			<div class="container">
				<h2>Delicious food from the <br> <span>
				最好的美食.</span>
				</h2> 
			</div>
		</div>
	</div>
	<!-- //banner -->    
	<!-- breadcrumb -->  
	<div class="container">	
		<ol class="breadcrumb w3l-crumbs">
			<li><a href="${pageContext.request.contextPath}/userIndex.action">
					<i class="fa fa-home"></i> 主页
				</a>
			</li> 
			<li><a href="${pageContext.request.contextPath}/userDelicious.action">
					<i class="active"></i> 菜单
				</a>
			</li> 
			<li class="active">菜单详情</li>
		</ol>
	</div>
	<!-- //breadcrumb -->
	<!-- privacy-page -->
	<div class="privacy about">
		<div class="container"> 
			<h3 class="w3ls-title w3ls-title1">
				${itemList[0].deliciousName}
			</h3>
			<div class="privacy-w3row">
			<div class="alert alert-info" role="alert">
				<strong>
					<font style="vertical-align: inherit;">
						<font style="vertical-align: inherit;">
							创建时间:
						</font>
					</font>
				</strong>
				<font style="vertical-align: inherit;">
					<font style="vertical-align: inherit;">
						<fmt:formatDate value='${itemList[0].deliciousTime}' pattern='yyyy-MM-dd HH:mm:ss'/>
					</font>
				</font>
				&nbsp;&nbsp;&nbsp;&nbsp;
				<strong>
					<font style="vertical-align: inherit;">
						<font style="vertical-align: inherit;">
							评分：
						</font>
					</font>
				</strong>
				<font style="vertical-align: inherit;">
					<font style="vertical-align: inherit;">
						<span class="badge badge-primary">
						<font style="vertical-align: inherit;">
						<font style="vertical-align: inherit;">${itemList[0].deliciousScore}
						</font></font>
						</span>
					</font>
				</font>
				&nbsp;&nbsp;&nbsp;&nbsp;
				<strong>
					<font style="vertical-align: inherit;">
						<font style="vertical-align: inherit;">
							作者：
						</font>
					</font>
				</strong>
				<font style="vertical-align: inherit;">
					<font style="vertical-align: inherit;">
						${itemList[0].userName}
					</font>
				</font>
				&nbsp;&nbsp;&nbsp;&nbsp;
				<strong>
					<font style="vertical-align: inherit;">
						<font style="vertical-align: inherit;">
							所属频道：
						</font>
					</font>
				</strong>
				<font style="vertical-align: inherit;">
					<font style="vertical-align: inherit;">
						${itemList[0].channelName}
					</font>
				</font>
			</div>
				<br>
				<div >
					<h3>美食图片：</h3><br>
					<img alt="" src="/pic/${itemList[0].deliciousPicture}" style="width: 50%;height: 50%"><br>
				</div>
				<div>
					<h3>美食评论：</h3><br>
					<div >
					 <c:if test="${!empty itemList2}">
						<table border="1" cellspacing="1" style="background-color:#a0c6e5">
	                   <thead>
	                     <tr>
	                       <th>评论时间</th>
	                       <th>评论内容</th>  
	                       <th>登录名</th>  
	                       <th>用户名</th>                                      
	                     </tr>
	                   </thead>
	                   <tbody>
	                     <c:forEach items="${itemList2}" var="itemList" >                 
	                     <tr>
	                       <td>
	                       <fmt:formatDate value="${itemList.discussTime}" pattern="yyyy.MM.dd HH:mm:ss"/>
	                       </td>
	                       <td>${itemList.discussContent}</td>
	                       <td>${itemList.loginName}</td>
	                       <td>${itemList.userName}</td>
	                     </tr>    
	                     </c:forEach>
	                   </tbody>
	                 </table>
	                  </c:if> 
	                   <c:if test="${empty itemList2}">
	                   <p>暂无评论</p>
	                   </c:if>   
					</div>
				</div>	
				
					
				<br>
				<div>
					<h3>美食做法：</h3><br>
					<div >
						${itemList[0].deliciousPractice}
					</div>
				</div>			
			</div>
		</div>
		
	</div>
	
	<!-- //privacy-page -->  
	
	<!-- footer -->
	<%@ include file="../jsp/userFooter.jsp" %>
	<!-- //footer -->
	<!-- cart-js -->
	<script src="js/minicart.js"></script>
	<script>
        w3ls.render();
        w3ls.cart.on('w3sb_checkout', function (evt) {
        	var items, len, i;

        	if (this.subtotal() > 0) {
        		items = this.items();

        		for (i = 0, len = items.length; i < len; i++) { 
        		}
        	}
        });
    </script>  
	<!-- //cart-js -->	
	<!-- start-smooth-scrolling -->
	<script src="js/SmoothScroll.min.js"></script>  
	<script type="text/javascript" src="js/move-top.js"></script>
	<script type="text/javascript" src="js/easing.js"></script>	
	<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){		
					event.preventDefault();
			
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
				});
			});
	</script>
	<!-- //end-smooth-scrolling -->	  
	<!-- smooth-scrolling-of-move-up -->
	<script type="text/javascript">
		$(document).ready(function() {
			/*
			var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear' 
			};
			*/
			
			$().UItoTop({ easingType: 'easeOutQuart' });
			
		});
	</script>
	<!-- //smooth-scrolling-of-move-up --> 
	<!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/bootstrap.js"></script>
</body>
</html>